Vue3接收静态页面URL中携带的参数

您所在的位置：网站首页 › uv 价值 › Vue3接收静态页面URL中携带的参数

Vue3接收静态页面URL中携带的参数

2023-06-06 19:36| 来源: 网络整理| 查看: 265

从HTML页面中的a链接里携带的参数要在vue3项目里接收到此参数目前有两个项目一个静态项目一个vue项目，我需要从静态页面的链接跳转到Vue项目中，并且这两个项目可以通过参数进行关联这里有两种方案：一种是将静态页面中的id存在本地，在vue中通过获取本地id传给接口从而渲染页面影响：可能会出现跨域第二种通过getUrlKey.js获取URL地址栏中跳转携带的参数步骤如下：

首先这里需要一个静态页面的url跳转到vue项目中链接在Vue页面中需要使用到getUrlKey.js export function getUrlKey(name){ return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null }

在页面中调用

import {getUrlKey} from '../utils/getUrlKey/getUrlKey';

使用方法：getUrlKey('id')

通过query将此页面传接收过来的参数 onMounted(() => { router.push({ query: { id: getUrlKey("id"), }, }); }) 用route接收获取到的id参数 let objs = { id: route.query.id }; 发送请求 getCoordinate(objs).then((res) => {...})

这时从静态页面的路径就会被getUrlKey通过正则的方式接收并解析出来

【本文地址】

Vue3接收静态页面URL中携带的参数

Vue3接收静态页面URL中携带的参数

今日新闻

推荐新闻